﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CustomWebControlUI.Default" %>

<%@ Register Assembly="Heidarpour.WebControlUI" Namespace="Heidarpour.WebControlUI"
    TagPrefix="rhp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">

        function onSelect(calendar, date) {
            // Beware that this function is called even if the end-user only
            // changed the month/year. In order to determine if a date was
            // clicked you can use the dateClicked property of the calendar:
            if (calendar.dateClicked) {
                var msg =
                        "<br/>Persian: Year: " + calendar.date.getJalaliFullYear() +
                        ", Month: " + (calendar.date.getJalaliMonth() + 1) +
                        ", Day: " + calendar.date.getJalaliDate() +
                        "<br/>Gregorian: Year: " + calendar.date.getFullYear() +
                        ", Month: " + calendar.date.getMonth() +
                        ", Day: " + calendar.date.getDate();

                $("#<%= DatePicker1.ClientID %>").val(date);
                logEvent("onSelect Event: <br> Selected Date: " + date + msg);
                calendar.hide();
                //calendar.callCloseHandler(); // this calls "onClose"
            }
        };

        function onUpdate(calendar){
            var msg =
                    "<br/>Persian: Year: " + calendar.date.getJalaliFullYear() +
                    ", Month: " + (calendar.date.getJalaliMonth() + 1) +
                    ", Day: " + calendar.date.getJalaliDate() +
                    "<br/>Gregorian: Year: " + calendar.date.getFullYear() +
                    ", Month: " + calendar.date.getMonth() +
                    ", Day: " + calendar.date.getDate();

            logEvent("onUpdate Event: <br> Selected Date: " + calendar.date.print('%Y/%m/%d', 'jalali') + msg);
        };

        function onClose(calendar) {
            logEvent("onClose Event");
            calendar.hide();
        };
        
        function logEvent(str) {
            $("#log").append("<li>" + str + "</li>");
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <rhp:DatePicker ID="DatePicker1" runat="server" DatePersian="1391/07/14" CalendarType="Persian"
        BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" ShowWeekNumbers="True"
        ReadOnly="True" FirstDayOfWeek="Monday" ShowOthers="True" 
        onclose="onClose" OnUpdate="onUpdate"></rhp:DatePicker>
    &nbsp;
    <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="btnSubmitPersian_Click" />
    <div align="left">
        
       <table>
           <tr>
               <td >
                   
                   Client side events</td>
               <td>
                   
               </td>
               <td>
                   
               </td>
               <td style="width: 200px">
                   
                   Server side events</td>
           </tr>
           <tr>
               <td rowspan="3" align="left" valign="top">
                   <ul id="log" style="direction: ltr">
                   </ul>
               </td>
               <td>
                   &nbsp;
               </td>
               <td>
                   &nbsp;
               </td>
               <td rowspan="3" valign="top">
                   <asp:Label ID="Label1" runat="server" ></asp:Label>
                   <br />
                   <asp:Label ID="Label2" runat="server" ></asp:Label>
                   <br />
                   <asp:Label ID="Label3" runat="server" ></asp:Label>
               </td>
           </tr>
           <tr>
               <td>
                   
                   &nbsp;</td>
               <td>
                   
                   &nbsp;</td>
           </tr>
           <tr>
               <td>
                   
                   &nbsp;</td>
               <td>
                   
                   &nbsp;</td>
           </tr>
       </table>
    </div>
    <br />
    <rhp:DatePicker ID="DatePicker2" runat="server" Date="2012-10-06" CalendarType="Gregorian"
        BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px">2012/10/06</rhp:DatePicker>
    &nbsp;
    <asp:Button ID="btnSubmitGregorian" runat="server" Text="Submit" OnClick="btnSubmitGregorian_Click" />
    <div align="left">
        <br />
        <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
        <br />
        <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
        <br />
        <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
    </div>
    <br />
</asp:Content>
